<template>
  <div id="app">
<!--    <div id="echart_map" ref="echart_map"></div>-->
    <div>
      <img src="@/assets/img.png" width="940rem">
    </div>
  </div>
</template>

<script>
  import {eventBus} from "../../assets/Bus";
  export default {
    data() {
      return {
        myChart: null,
      };
    },
    mounted() {
      this.showScatterInGeo(this.cityCode);
      this.clickGoNext();
      //自适应方案一
      // let _this = this;
      // window.onresize = function() {
      //   _this.myChart.resize()
      // }

      //   //当手机旋转的时候，触发“orientationchange”该事件
      // window.addEventListener("orientationchange", hengshuping, false);
      // function hengshuping() {
      //   setTimeout(()=>{
      //     //横屏
      //     if (window.orientation == 90 || window.orientation == -90) {
      //       this.myChart.resize()
      //     }
      //     //竖屏
      //     else if (window.orientation == 0 || window.orientation == 180) {
      //       this.myChart.resize()
      //     }
      //   },500);
      //
      // }
    },
    // created() {
    //   this.timer = setInterval(() =>{
    //     this.showScatterInGeo(this.cityCode);
    //     // this.clickGoNext();
    //     // console.log("13131")
    //   },1000* 5)
    // },
    methods: {

      /*
        geo:地理坐标系组件( https://echarts.apache.org/zh/option.html#geo)
        地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图
      */
      showScatterInGeo() {
        this.myChart = this.$echarts.init(this.$refs.echart_map);
        var chinamap = require("../../assets/map/china.json"); //使用 require 引入地图组件，而不是在开头的 import
        this.$echarts.registerMap("china", chinamap);
        this.option = {
          geo: {
            type: "map",
            map: "china",
            label: {
              normal: {
                color: "#000000",
                show: true, //省份名称
              },
            },
          },
          series: [
            {
              name: "在地图中显示散点图",
              type: "scatter",
              coordinateSystem: "geo", //设置坐标系为 geo
              data: [
                //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}] 上海: [121.48, 31.22],
                { name: "上海", value: [121.48, 31.22] },
                { name: "杭州", value: [120.19, 30.26] },
                { name: "北京", value: [116.46, 39.92] },
                // { name: "北京", value: [116.41995, 40.18994] },
                // { name: "郑州", value: [113.665412, 34.757975] },
                // { name: "天津", value: [117.205126, 39.034933] },
                // { name: "昆明", value: [102.81844, 24.906231] },
                // { name: "广州", value: [113.26453, 23.155008] },
              ],
              label: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
          ],
        };
        // 4. myChart.setOption
        this.myChart.setOption(this.option);

        // window.onresize = function () {
        //   console.log("开始自适应")
        //   this.myChart.resize()
        // }
      },
      /*
        鼠标事件： https://echarts.apache.org/zh/api.html#echartsInstance.on
        echarts.getMap() :https://echarts.apache.org/zh/api.html#echarts.getMap
          1.  只有用echarts的地图，才能使用  echarts.getMap("china").geoJson.features
      */
      clickGoNext() {
        var that = this;
        var dataList = that.$echarts.getMap("china").geoJson.features;
        // console.log("dataList:", dataList);

        // 鼠标事件
        this.myChart.on("click", function (res) {
          eventBus.$emit("getEchartMapData", res)
          // dataList.forEach((element) => {
          //   if (element.properties.name == res.name) {
          //     console.log("city code:", element.id);
          //   }
          // });
        });
      },
    },
  };
</script>

<style scoped>
  #echart_map {
    width: 100%;
    height: 31.25rem;
    background-color: #f1f3f4;
  }
</style>
